<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>后台管理系统</title>
    <link rel="stylesheet" href="../css/backsystem_home.min.css">
    <link rel="stylesheet" href="../css/bootstrap.css">
    <script src="../js/jquery-3.6.0.min.js"></script>
    <script src="../js/bootstrap.bundle.min.js"></script>
    <!-- 统计 -->
    <script src="https://cdn.highcharts.com.cn/highcharts/highcharts.js"></script>
    <script src="https://cdn.highcharts.com.cn/highcharts/modules/exporting.js"></script>
    <script src="https://img.hcharts.cn/highcharts-plugins/highcharts-zh_CN.js"></script>
    <script src="https://cdn.highcharts.com.cn/highcharts/themes/sand-signika.js"></script>
    <script src="https://cdn.highcharts.com.cn/highcharts/modules/variable-pie.js"></script>
    <!-- 柱状图 -->
    <link rel="stylesheet" href="../css/sandsignika.min.css">
</head>

<body>
    <div class="content">
        <!-- 后台系统头部布局 -->
        <header>
            <div class="header-left">
                <a href="backsystem_home.html" class="logo"></a>
                <span>后台管理系统</span>
            </div>
            <div class="header-right">
                <ul>
                    <li>
                        <a href="#">user3</a>
                    </li>
                    <div class="division"></div>
                    <li>
                        <a href="#">后台系统</a>
                    </li>
                    <div class="division"></div>
                    <li>
                        <a href="#">修改密码</a>
                    </li>
                    <div class="division"></div>
                    <li>
                        <a href="login.html">安全退出</a>
                    </li>
                    <div class="division"></div>
                    <li>
                        <a href="https://www.bilibili.com">常见问题解答</a>
                    </li>
                </ul>
            </div>
        </header>
        <!-- 后台系统主体内容布局 -->
        <main>
            <!-- 侧边栏 -->
            <aside>
                <div class="nav flex-column text-center" id="v-pills-tab" role="tablist" aria-orientation="vertical">
                    <!-- 首页 -->
                    <a class="nav-link" id="v-pills-profile-tab" data-toggle="pill" href="#v-pills-home"
                        role="tab">首页</a>
                    <!-- 统计 -->
                    <a class="nav-link">统计</a>
                    <!-- 订单信息 -->
                    <a class="nav-link" class="nav-link" id="v-pills-profile-tab" data-toggle="pill"
                        href="#v-pills-order" role="tab" aria-controls="v-pills-home" aria-selected="true">订单信息</a>
                    <!-- 产品管理 -->
                    <div class="accordion" id="accordionExample">
                        <div class="card">
                            <div class="card-header" id="headingOne">
                                <a class="nav-link">
                                    <button class="btn btn-link text-center btn-blockt collapsed" type="button"
                                        data-toggle="collapse" data-target="#collapseOne" aria-expanded="true"
                                        aria-controls="collapseOne">
                                        产品管理
                                    </button>
                                </a>
                            </div>
                            <div id="collapseOne" class="collapse" aria-labelledby="headingOne"
                                data-parent="#accordionExample">
                                <div class="card-body">
                                    <div class="nav flex-column" id="v-pills-tab" role="tablist"
                                        aria-orientation="vertical">
                                        <a class="nav-link sub-link" id="v-pills-profile-tab" data-toggle="pill"
                                            href="#v-pills-addprofile" role="tab" aria-controls="v-pills-profile"
                                            aria-selected="false">添加产品</a>
                                        <a class="nav-link sub-link" id="v-pills-profile-tab" data-toggle="pill"
                                            href="#v-pills-profilelist" role="tab" aria-controls="v-pills-profile"
                                            aria-selected="false">产品列表</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- 库存管理 -->
                    <a class="nav-link">库存管理</a>
                    <!-- 物流管理 -->
                    <a class="nav-link">物流管理</a>
                    <!-- 售后管理 -->
                    <a class="nav-link">售后管理</a>
                    <!-- 资金流水 -->
                    <a class="nav-link">资金流水</a>
                    <!-- 会员管理 -->
                    <a class="nav-link">会员管理</a>
                </div>
            </aside>
            <section>
                <div class="section">
                    <div class="tab-content" id="v-pills-tabContent">
                        <!-- section首页部分 -->
                        <div class="tab-pane fade show active" id="v-pills-home" role="tabpanel" aria-labelledby="v-pills-home-tab">
                            <div class="container">
                                <div class="row">
                                    <div class="col-12">
                                        <p class="section-title">首页</p>
                                    </div>
                                </div>
                                <!-- 数量统计 -->
                                <div class="row">
                                    <div class="col-sm-3">
                                        <div class="card">
                                            <div class="card-body">
                                                <h5 class="card-title">今日销售总额</h5>
                                                <span class="yuan">15982.98</span>
                                                <em class="chart-up">比昨日上升20%</em>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-sm-3">
                                        <div class="card">
                                            <div class="card-body">
                                                <h5 class="card-title">今日订单量</h5>
                                                <span>2390</span>
                                                <em class="chart-up">比昨日上升20%</em>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-sm-3">
                                        <div class="card">
                                            <div class="card-body">
                                                <h5 class="card-title">今日发货数量</h5>
                                                <span>5960</span>
                                                <em class="chart-down">比昨日下降20%</em>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-sm-3">
                                        <div class="card">
                                            <div class="card-body">
                                                <h5 class="card-title">今日评价数量</h5>
                                                <span>6958</span>
                                                <em class="chart-up">比昨日上升20%</em>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <!-- 支付买家数 实时数据 -->
                                <div class="row">
                                    <div class="col-6">
                                        <div class="col-12 coustom">
                                            <h5> 支付买家数</h5>
                                            <div class="des">
                                                <span>2017-01-12 - 2018-11-14</span>
                                                <div class="division"></div>
                                                <i> 近7天</i>
                                                <div class="division"></div>
                                                <i>全国</i>
                                            </div>
                                            <div id="maimairenshu" style="min-width:200px;height:200px"></div>
                                            <script type="text/javascript" src="../js/sandsignika.js"></script>
                                        </div>
                                    </div>
                                    <div class="col-6">
                                        <div class="col-12 coustom">
                                            <h5> 实时数据</h5>
                                            <div class="des">
                                                <span>2017-01-12 - 2018-11-14</span>
                                                <div class="division"></div>
                                                <i> 近7天</i>
                                                <div class="division"></div>
                                                <i>全国</i>
                                            </div>
                                            <div id="shishishuju" style="min-width:200px;height:200px"></div>
                                            <script type="text/javascript" src="../js/sandsignika2.js"></script>
                                        </div>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="small-box">
                                        <p>消费者年龄占比</p>
                                        <div>
                                            <div class="bt-legend">
                                                <div class="item">
                                                    <div class="circle c1"></div>
                                                    18-25岁
                                                </div>
                                                <div class="item">
                                                    <div class="circle c2"></div>
                                                    26-35岁
                                                </div>
                                                <div class="item">
                                                    <div class="circle c3"></div>
                                                    36-45岁
                                                </div>
                                                <div class="item">
                                                    <div class="circle c4"></div>
                                                    46-55岁
                                                </div>
                                            </div>
                                            <div id="bingxingtu" style="min-width:200px;height:180px"></div>
                                            <script src="../js/sandsignika3.js"></script>
                                        </div>
                                    </div>
                                    <div class="small-box" id="xfrqfx">
                                        <p>消费人群分析</p>
                                        <div class="gender">
                                            <span class="left">男性</span>
                                            <span class="right">35%</span>
                                        </div>
                                        <div class="progress">
                                            <div class="progress-bar bg-success" role="progressbar" style="width: 35%"
                                                aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
                                        </div>
                                        <div class="gender">
                                            <span class="left">女性</span>
                                            <span class="right">65%</span>
                                        </div>
                                        <div class="progress">
                                            <div class="progress-bar bg-success" role="progressbar" style="width: 65%"
                                                aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
                                        </div>
                                    </div>
                                    <div class="small-box">
                                        <p>投诉数据</p>
                                        <div id="tiaoxingtu" style="min-width:200px;height:170px"></div>
                                        <script src="../js/sandsignika4.js"></script>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- section订单管理 -->
                        <div class="tab-pane fade" id="v-pills-order" role="tabpanel"
                            aria-labelledby="v-pills-order-tab">
                            <div class="container">
                                <div class="row">
                                    <div class="col-12">
                                        <p class="section-title">订单管理</p>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="box box-top">
                                        <div class="col-12 form-group row">
                                            <label for="inputText"
                                                class="col-form-label">&nbsp;&nbsp;&nbsp;商品ID:</label>
                                            <div class="col-3 box-right">
                                                <input type="text" class="col-10 form-control" id="inputText">
                                            </div>
                                        </div>
                                        <div class="col-12 form-group row">
                                            <label for="inputText" class="col-form-label">商品名称:</label>
                                            <div class="col-3 box-right">
                                                <input type="text" class="col-10 form-control" id="inputText">
                                            </div>
                                            <label for="inputText" class="col-form-label">交易时间:</label>
                                            <div class="col-3 time-division">
                                                <input type="text" class="col-10 form-control bg-gray" id="inputText"
                                                    placeholder="开始时间">
                                            </div>
                                            <div class="col-3">
                                                <input type="text" class="col-10 form-control bg-gray" id="inputText"
                                                    placeholder="结束时间">
                                            </div>
                                        </div>
                                        <div class="col-12 form-group row">
                                            <label for="inputText" class="col-form-label">买家昵称:</label>
                                            <div class="col-3 box-right">
                                                <input type="text" class="col-10 form-control" id="inputText">
                                            </div>
                                            <label for="inputState" class="col-form-label">交易类型:</label>
                                            <div class="col-3 box-right">
                                                <select id="inputState" class="col-10 form-control bg-gray box-right">
                                                    <option selected>所有类型</option>
                                                    <option>...</option>
                                                </select>
                                            </div>
                                            <label for="inputState" class="col-form-label">订单状态:</label>
                                            <div class="col-3 box-right">
                                                <select id="inputState" class="col-10 form-control bg-gray box-right">
                                                    <option selected>全部</option>
                                                    <option>...</option>
                                                </select>
                                            </div>
                                        </div>
                                        <div class="col-12 form-group row">
                                            <label for="inputText" class="col-form-label">订单编号:</label>
                                            <div class="col-3 box-right">
                                                <input type="text" class="col-10 form-control" id="inputText">
                                            </div>
                                            <label for="inputState" class="col-form-label">物流服务:</label>
                                            <div class="col-3 box-right">
                                                <select id="inputState" class="col-10 form-control bg-gray box-right">
                                                    <option selected>全部</option>
                                                    <option>...</option>
                                                </select>
                                            </div>
                                            <label for="inputState" class="col-form-label">评价状态:</label>
                                            <div class="col-3 box-right">
                                                <select id="inputState" class="col-10 form-control bg-gray box-right">
                                                    <option selected>全部</option>
                                                    <option>...</option>
                                                </select>
                                            </div>
                                        </div>
                                        <div class="col-12 form-group row">
                                            <label for="inputState" class="col-form-label">预售状态:</label>
                                            <div class="col-3 box-right">
                                                <select id="inputState" class="col-10 form-control bg-gray box-right">
                                                    <option selected>全部</option>
                                                    <option>...</option>
                                                </select>
                                            </div>
                                            <label for="inputState" class="col-form-label">订单类型:</label>
                                            <div class="col-3 box-right">
                                                <select id="inputState" class="col-10 form-control bg-gray box-right">
                                                    <option selected>全部</option>
                                                    <option>...</option>
                                                </select>
                                            </div>
                                            <label for="inputState" class="col-form-label">售后服务:</label>
                                            <div class="col-3 box-right">
                                                <select id="inputState" class="col-10 form-control bg-gray box-right">
                                                    <option selected>全部</option>
                                                    <option>...</option>
                                                </select>
                                            </div>
                                        </div>
                                        <div class="row">
                                            <div class="wrap">
                                                <button class="red-white">搜索订单</button>
                                                <button>批量导出</button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="box">
                                        <nav class="nav">
                                            <a class="nav-link one" href="#">近一个月订单</a>
                                            <span class="nav-division"></span>
                                            <a class="nav-link" href="#">等待买家付款</a>
                                            <span class="nav-division"></span>
                                            <a class="nav-link" href="#">等待发货</a>
                                            <span class="nav-division"></span>
                                            <a class="nav-link" href="#">已发货</a>
                                            <span class="nav-division"></span>
                                            <a class="nav-link" href="#">退款中</a>
                                            <span class="nav-division"></span>
                                            <a class="nav-link" href="#">需要评价</a>
                                            <span class="nav-division"></span>
                                            <a class="nav-link" href="#">成功的订单</a>
                                            <span class="nav-division"></span>
                                            <a class="nav-link" href="#">关闭的订单</a>
                                        </nav>
                                        <div class="table">
                                            <table>
                                                <thead>
                                                    <tr>
                                                        <td>商品</td>
                                                        <td>单价</td>
                                                        <td>数量</td>
                                                        <td>销售单位</td>
                                                        <td>交易状态</td>
                                                        <td>实收款</td>
                                                        <td>评价</td>
                                                    </tr>
                                                </thead>
                                                <tbody>
                                                    <tr>
                                                        <td></td>
                                                    </tr>
                                                </tbody>
                                            </table>
                                        </div>
                                        <div class="table-footer">
                                            <div class="form-check">
                                                <input type="checkbox" value="" id="defaultCheck1">
                                                <label for="defaultCheck1">全选</label>
                                            </div>
                                            <button>批量发货</button>
                                            <button>批量标记</button>
                                            <button>批量免运费</button>
                                            <div class="form-check">
                                                <input type="checkbox" value="" id="defaultCheck1">
                                                <label for="defaultCheck1">不显示已关闭的订单</label>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- section产品管理 添加产品 -->
                        <div class="tab-pane fade" id="v-pills-addprofile" role="tabpanel"
                            aria-labelledby="v-pills-addprofile-tab">
                            <div class="row">
                                <div class="col-12">
                                    <p class="section-title">添加产品</p>
                                </div>
                            </div>
                            <div class="row">
                                <div class="box addprofile">
                                    <div class="col-6">
                                        <div class="form-group">
                                            <label for="profilename">产品名称：</label>
                                            <input type="text" class="col-10 form-control" id="profilename">
                                        </div>
                                        <div class="form-group">
                                            <label for="profileclass">产品分类：</label>
                                            <div class="flex">
                                                <input type="text" class="col-6 form-control" id="profileclass">
                                                <button class="profile-btn profileclass">管理分类</button>
                                            </div>
                                        </div>
                                        <div class="flex parameter-mt">
                                            <p class="name-right">产品参数</p>
                                            <button class="profile-btn parameter">管理参数</button>
                                        </div>
                                        <div class="form-group">
                                            <label for="profilenumber">货号：</label>
                                            <input type="text" class="col-10 form-control" id="profilenumber">
                                        </div>
                                        <div class="form-group">
                                            <label for="barcode">条码：</label>
                                            <input type="text" class="col-10 form-control" id="barcode">
                                        </div>
                                        <div class="form-group">
                                            <label for="price">价格：</label>
                                            <input type="text" class="col-10 form-control" id="price">
                                        </div>
                                        <div class="form-group">
                                            <label for="profileplace">产地：</label>
                                            <input type="text" class="col-10 form-control" id="profileplace">
                                        </div>
                                    </div>
                                    <div class="add-division"></div>
                                    <div class="col-6">
                                        <button class="profile-btn btn-pic">图片</button>
                                        <button class="btn-video">视频</button>
                                        <div class="addpic">
                                            +添加图片
                                        </div>
                                        <div class="pic-right">
                                            <button class="profile-btn btn-save">保存</button>
                                            <button class="btn-cancel">取消</button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- section产品管理 产品列表 -->
                        <div class="tab-pane fade" id="v-pills-profilelist" role="tabpanel"
                            aria-labelledby="v-pills-profilelist-tab">
                            <div class="row">
                                <div class="col-12">
                                    <p class="section-title">产品列表</p>
                                </div>
                            </div>
                            <div class="row">
                                <div class="profilelist-title">
                                    <button><i><img src="../images/productlist_job.png" alt=""></i> 批量操作</button>
                                    <label for="profilename" class="">产品名称：</label>
                                    <input type="text" class="profilename-inp" id="profilename">
                                    <label for="profileclass" class="">商品分类：</label>
                                    <input type="text" class="profilename-inp" id="profileclass">
                                    <button class="btn-select">查询</button>
                                </div>
                            </div>
                            <div class="row">
                                <div class="box profilelist">
                                    <table>
                                        <thead>
                                            <tr>
                                                <td>商品名称</td>
                                                <td>商品图片</td>
                                                <td>分类</td>
                                                <td>单价</td>
                                                <td>库存</td>
                                                <td>录入时间</td>
                                                <td>操作</td>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            <tr>
                                                <td>进口芒果</td>
                                                <td><img src="../images/product_pic1.png" alt=""></td>
                                                <td>热卖推荐</td>
                                                <td>￥58.00</td>
                                                <td>3464</td>
                                                <td>2020-07-22</td>
                                                <td>
                                                    <div class="btn-group">
                                                        <button class="btn-des">详情</button>
                                                        <div class="btn-division"></div>
                                                        <button class="btn-revise">修改</button>
                                                        <div class="btn-division"></div>
                                                        <button class="btn-delete">删除</button>
                                                    </div>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>进口芒果</td>
                                                <td><img src="../images/product_pic1.png" alt=""></td>
                                                <td>热卖推荐</td>
                                                <td>￥58.00</td>
                                                <td>3464</td>
                                                <td>2020-07-22</td>
                                                <td>
                                                    <div class="btn-group">
                                                        <button class="btn-des">详情</button>
                                                        <div class="btn-division"></div>
                                                        <button class="btn-revise">修改</button>
                                                        <div class="btn-division"></div>
                                                        <button class="btn-delete">删除</button>
                                                    </div>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>进口芒果</td>
                                                <td><img src="../images/product_pic1.png" alt=""></td>
                                                <td>热卖推荐</td>
                                                <td>￥58.00</td>
                                                <td>3464</td>
                                                <td>2020-07-22</td>
                                                <td>
                                                    <div class="btn-group">
                                                        <button class="btn-des">详情</button>
                                                        <div class="btn-division"></div>
                                                        <button class="btn-revise">修改</button>
                                                        <div class="btn-division"></div>
                                                        <button class="btn-delete">删除</button>
                                                    </div>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>进口芒果</td>
                                                <td><img src="../images/product_pic1.png" alt=""></td>
                                                <td>热卖推荐</td>
                                                <td>￥58.00</td>
                                                <td>3464</td>
                                                <td>2020-07-22</td>
                                                <td>
                                                    <div class="btn-group">
                                                        <button class="btn-des">详情</button>
                                                        <div class="btn-division"></div>
                                                        <button class="btn-revise">修改</button>
                                                        <div class="btn-division"></div>
                                                        <button class="btn-delete">删除</button>
                                                    </div>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>进口芒果</td>
                                                <td><img src="../images/product_pic1.png" alt=""></td>
                                                <td>热卖推荐</td>
                                                <td>￥58.00</td>
                                                <td>3464</td>
                                                <td>2020-07-22</td>
                                                <td>
                                                    <div class="btn-group">
                                                        <button class="btn-des">详情</button>
                                                        <div class="btn-division"></div>
                                                        <button class="btn-revise">修改</button>
                                                        <div class="btn-division"></div>
                                                        <button class="btn-delete">删除</button>
                                                    </div>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>进口芒果</td>
                                                <td><img src="../images/product_pic1.png" alt=""></td>
                                                <td>热卖推荐</td>
                                                <td>￥58.00</td>
                                                <td>3464</td>
                                                <td>2020-07-22</td>
                                                <td>
                                                    <div class="btn-group">
                                                        <button class="btn-des">详情</button>
                                                        <div class="btn-division"></div>
                                                        <button class="btn-revise">修改</button>
                                                        <div class="btn-division"></div>
                                                        <button class="btn-delete">删除</button>
                                                    </div>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>进口芒果</td>
                                                <td><img src="../images/product_pic1.png" alt=""></td>
                                                <td>热卖推荐</td>
                                                <td>￥58.00</td>
                                                <td>3464</td>
                                                <td>2020-07-22</td>
                                                <td>
                                                    <div class="btn-group">
                                                        <button class="btn-des">详情</button>
                                                        <div class="btn-division"></div>
                                                        <button class="btn-revise">修改</button>
                                                        <div class="btn-division"></div>
                                                        <button class="btn-delete">删除</button>
                                                    </div>
                                                </td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>
                                <div class="pages">
                                    <nav aria-label="Page navigation example">
                                        <ul class="pagination">
                                            <li class="page-item">
                                                <a class="page" href="#" aria-label="Previous">
                                                    <span aria-hidden="true">&lt;</span>
                                                </a>
                                            </li>
                                            <li class="page-item"><a class="page" href="#">1</a></li>
                                            <li class="page-item"><a class="page" href="#">2</a></li>
                                            <li class="page-item"><a class="page" href="#">3</a></li>
                                            <li class="page-item"><a class="page" href="#">4</a></li>
                                            <li class="page-item"><a class="page" href="#">......</a></li>
                                            <li class="page-item"><a class="page" href="#">10</a></li>
                                            <li class="page-item">
                                                <a class="page" href="#" aria-label="Next">
                                                    <span aria-hidden="true">&gt;</span>
                                                </a>
                                            </li>
                                        </ul>
                                    </nav>
                                    <span>
                                        前往
                                        <input type="text" class="pagenumber">
                                        页
                                    </span>
                                </div>
                            </div>

                        </div>
                    </div>
                </div>
            </section>
        </main>
    </div>
</body>

</html>